Scriptel ScripTouch Keyboard Wedge API: Tutorial: 01

The primary function of your ScripTouch EasyScript device is to capture signatures. This tutorial will walk you through taking a signature string and turning it into an object you can access programatically with JavaScript using Google Chrome (it should work with the most recent versions of all the other major browsers too).

First, create a new text document and name it "easyscript01.html" and place it in the same folder as scriptel-easyscript.js that was distributed with the API package. In the file put the following code/markup:

<!DOCTYPE html>
<html>
    <head>
        <title>EasyScript Tutorial 01</title>
        <script type="text/javascript" src="scriptel-easyscript.js"></script>
        <script type="text/javascript">
            function parseSignature() {
                //Get the value of our text box.
                var sigString = document.getElementById("easyscript_string").value;

                //Create a new EasyScript object
                var escript = new ScriptelEasyScript();

                //Ask the EasyScript object to parse our string.
                var sig = escript.parseSignature(sigString);

                //Print the signature object.
                console.log(sig);
            }
        </script>
    </head>
    <body>
        <input type="text" id="easyscript_string" />
        <input type="button" value="Parse" onclick="parseSignature();" />
    </body>
</html>

To run this example open Google Chrome and drag-and-drop the file you just created into the browser. Then open the developer console by going to: Menu -> Tools -> Developer Tools. After the developer tools are open try signing in the text box and hitting "Parse". You should see a signature object appear in your console window. Try expanding it to see all of the properties associated with the object.

This object can be used directly to draw signatures, post the signature to a server, insert the signature into a database, etc. The signature can be serialized by using JSON.stringify. You can also ask the library to draw the signature onto a canvas for you. This can be done by adding the following tag to the body tag:

<canvas id="signature" width="480" height="128"></canvas>

Then you can add the following code to replace the console.log line in the script:

escript.drawSignatureOnCanvas(sig,document.getElementById("signature"));

Now refresh and try the example again, this time you should see the rendered signature after pressing parse. You'll notice if you sign several times the signatures sign on top of each other. You can fix this by clearing the canvas before you draw the signature. Add the following code before the drawSignatureOnCanvas call:

var canvas = document.getElementById("signature");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "white";
ctx.fillRect(0,0,480,128);

This will clear the signature every time you sign. Now, what if you wanted to make the line thicker and a different color? You can do this by modifying your drawSignatureOnCanvas call to look like the following:

escript.drawSignatureOnCanvas(sig,canvas,{lineWidth:3,strokeStyle:"blue"});

There are many different styles you can apply to the lines, for a more detailed list please check out the the this reference. Now what happens if you want to save the image, either to post it to a server or to let the user download it? This can be accomplished by the canvas toDataURL call.

Just add the following code after the drawSignatureOnCanvas call to turn the canvas into an image and redirect your browser to the resulting image:

window.location = canvas.toDataURL();

You'll notice once you click the button this time you'll get redirected to a strange url, this URL is actually the contents of the picture you just created. You can right click and download the picture or if you had wanted to you could have saved the contents of the picture and posted it to your server.

Tutorial: 01 - Parsing a Signature

01 - Parsing a Signature